<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .tabs {
            display: flex;
            background: white;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .tab {
            flex: 1;
            padding: 15px 20px;
            text-align: center;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            border-bottom-color: #667eea;
            background-color: #f8f9ff;
        }
        
        .tab:hover {
            background-color: #f0f2ff;
        }
        
        .tab-content {
            display: none;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .tab-content.active {
            display: block;
        }
        
        .section {
            margin-bottom: 30px;
        }
        
        .section h3 {
            color: #667eea;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: transform 0.2s ease;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-danger {
            background: #dc3545;
        }
        
        .btn-success {
            background: #28a745;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .table th,
        .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .table th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #555;
        }
        
        .table tr:hover {
            background-color: #f5f5f5;
        }
        
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .checkbox-item input[type="checkbox"] {
            width: auto;
        }
        
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
            border-left: 4px solid;
        }
        
        .alert-success {
            background-color: #d4edda;
            border-color: #28a745;
            color: #155724;
        }
        
        .alert-error {
            background-color: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        
        .permission-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .permission-card {
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
        }
        
        .permission-card h4 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .permission-card p {
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔐 权限管理系统</h1>
            <p>动态配置用户角色和权限，实现细粒度访问控制</p>
        </div>
        
        <div class="tabs">
            <div class="tab active" onclick="showTab('users')">👥 用户管理</div>
            <div class="tab" onclick="showTab('roles')">🎭 角色管理</div>
            <div class="tab" onclick="showTab('permissions')">🔑 权限管理</div>
            <div class="tab" onclick="showTab('assignments')">⚙️ 权限分配</div>
        </div>
        
        <!-- 用户管理标签页 -->
        <div id="users" class="tab-content active">
            <div class="section">
                <h3>用户列表</h3>
                <div id="userList" class="loading">加载中...</div>
            </div>
        </div>
        
        <!-- 角色管理标签页 -->
        <div id="roles" class="tab-content">
            <div class="section">
                <h3>角色列表</h3>
                <div id="roleList" class="loading">加载中...</div>
            </div>
            
            <div class="section">
                <h3>创建新角色</h3>
                <form id="createRoleForm">
                    <div class="form-group">
                        <label for="roleName">角色名称</label>
                        <input type="text" id="roleName" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="roleDescription">角色描述</label>
                        <textarea id="roleDescription" class="form-control" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn">创建角色</button>
                </form>
            </div>
        </div>
        
        <!-- 权限管理标签页 -->
        <div id="permissions" class="tab-content">
            <div class="section">
                <h3>权限列表</h3>
                <div id="permissionList" class="loading">加载中...</div>
            </div>
            
            <div class="section">
                <h3>创建新权限</h3>
                <form id="createPermissionForm">
                    <div class="form-group">
                        <label for="permissionName">权限名称</label>
                        <input type="text" id="permissionName" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="permissionCode">权限代码</label>
                        <input type="text" id="permissionCode" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="permissionResource">资源类型</label>
                        <input type="text" id="permissionResource" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="permissionAction">操作类型</label>
                        <input type="text" id="permissionAction" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="permissionDescription">权限描述</label>
                        <textarea id="permissionDescription" class="form-control" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn">创建权限</button>
                </form>
            </div>
        </div>
        
        <!-- 权限分配标签页 -->
        <div id="assignments" class="tab-content">
            <div class="section">
                <h3>角色权限分配</h3>
                <div class="form-group">
                    <label for="assignRole">选择角色</label>
                    <select id="assignRole" class="form-control">
                        <option value="">请选择角色</option>
                    </select>
                </div>
                <div id="rolePermissions" class="permission-grid"></div>
                <button id="saveRolePermissions" class="btn" style="display: none;">保存权限分配</button>
            </div>
            
            <div class="section">
                <h3>用户角色分配</h3>
                <div class="form-group">
                    <label for="assignUser">选择用户</label>
                    <select id="assignUser" class="form-control">
                        <option value="">请选择用户</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="assignUserRole">选择角色</label>
                    <select id="assignUserRole" class="form-control">
                        <option value="">请选择角色</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="assignUserDepartment">选择部门</label>
                    <select id="assignUserDepartment" class="form-control">
                        <option value="">请选择部门</option>
                    </select>
                </div>
                <button id="saveUserRole" class="btn">保存角色分配</button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentUser = null;
        let permissions = [];
        let roles = [];
        let users = [];
        let departments = [];
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeApp();
        });
        
        // 初始化应用
        async function initializeApp() {
            try {
                // 检查登录状态
                const token = localStorage.getItem('token');
                if (!token) {
                    showAlert('请先登录系统', 'error');
                    return;
                }
                
                // 加载基础数据
                await Promise.all([
                    loadPermissions(),
                    loadRoles(),
                    loadUsers(),
                    loadDepartments()
                ]);
                
                // 绑定事件
                bindEvents();
                
                // 显示默认标签页
                showTab('users');
                
            } catch (error) {
                console.error('初始化失败:', error);
                showAlert('系统初始化失败', 'error');
            }
        }
        
        // 绑定事件
        function bindEvents() {
            // 创建角色表单
            document.getElementById('createRoleForm').addEventListener('submit', handleCreateRole);
            
            // 创建权限表单
            document.getElementById('createPermissionForm').addEventListener('submit', handleCreatePermission);
            
            // 角色权限分配
            document.getElementById('assignRole').addEventListener('change', handleRoleChange);
            document.getElementById('saveRolePermissions').addEventListener('click', handleSaveRolePermissions);
            
            // 用户角色分配
            document.getElementById('assignUser').addEventListener('change', handleUserChange);
            document.getElementById('saveUserRole').addEventListener('click', handleSaveUserRole);
        }
        
        // 显示标签页
        function showTab(tabName) {
            // 隐藏所有标签页内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 移除所有标签页的active类
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的标签页
            document.getElementById(tabName).classList.add('active');
            
            // 激活对应的标签
            event.target.classList.add('active');
            
            // 加载对应标签页的数据
            loadTabData(tabName);
        }
        
        // 加载标签页数据
        async function loadTabData(tabName) {
            switch(tabName) {
                case 'users':
                    await loadUsers();
                    break;
                case 'roles':
                    await loadRoles();
                    break;
                case 'permissions':
                    await loadPermissions();
                    break;
                case 'assignments':
                    await loadAssignmentsData();
                    break;
            }
        }
        
        // 加载权限数据
        async function loadPermissions() {
            try {
                const response = await fetch('/api/permissions', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    permissions = data.data;
                    renderPermissionList();
                } else {
                    throw new Error('加载权限失败');
                }
            } catch (error) {
                console.error('加载权限失败:', error);
                showAlert('加载权限失败', 'error');
            }
        }
        
        // 加载角色数据
        async function loadRoles() {
            try {
                const response = await fetch('/api/admin/roles', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    roles = data.data;
                    renderRoleList();
                    updateRoleSelects();
                } else {
                    throw new Error('加载角色失败');
                }
            } catch (error) {
                console.error('加载角色失败:', error);
                showAlert('加载角色失败', 'error');
            }
        }
        
        // 加载用户数据
        async function loadUsers() {
            try {
                const response = await fetch('/api/admin/users', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    users = data.data;
                    renderUserList();
                    updateUserSelects();
                } else {
                    throw new Error('加载用户失败');
                }
            } catch (error) {
                console.error('加载用户失败:', error);
                showAlert('加载用户失败', 'error');
            }
        }
        
        // 加载部门数据
        async function loadDepartments() {
            try {
                const response = await fetch('/api/departments', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    departments = data.data;
                    updateDepartmentSelects();
                } else {
                    throw new Error('加载部门失败');
                }
            } catch (error) {
                console.error('加载部门失败:', error);
                showAlert('加载部门失败', 'error');
            }
        }
        
        // 加载分配数据
        async function loadAssignmentsData() {
            await Promise.all([
                loadRoles(),
                loadUsers(),
                loadDepartments()
            ]);
        }
        
        // 渲染权限列表
        function renderPermissionList() {
            const container = document.getElementById('permissionList');
            
            if (permissions.length === 0) {
                container.innerHTML = '<p>暂无权限数据</p>';
                return;
            }
            
            const html = `
                <table class="table">
                    <thead>
                        <tr>
                            <th>权限名称</th>
                            <th>权限代码</th>
                            <th>资源类型</th>
                            <th>操作类型</th>
                            <th>描述</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${permissions.map(permission => `
                            <tr>
                                <td>${permission.name}</td>
                                <td><code>${permission.code}</code></td>
                                <td>${permission.resource}</td>
                                <td>${permission.action}</td>
                                <td>${permission.description || '-'}</td>
                                <td>
                                    <button class="btn btn-secondary" onclick="editPermission(${permission.id})">编辑</button>
                                    <button class="btn btn-danger" onclick="deletePermission(${permission.id})">删除</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
            
            container.innerHTML = html;
        }
        
        // 渲染角色列表
        function renderRoleList() {
            const container = document.getElementById('roleList');
            
            if (roles.length === 0) {
                container.innerHTML = '<p>暂无角色数据</p>';
                return;
            }
            
            const html = `
                <table class="table">
                    <thead>
                        <tr>
                            <th>角色名称</th>
                            <th>角色描述</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${roles.map(role => `
                            <tr>
                                <td>${role.name}</td>
                                <td>${role.description || '-'}</td>
                                <td>
                                    <button class="btn btn-secondary" onclick="editRole(${role.id})">编辑</button>
                                    <button class="btn btn-danger" onclick="deleteRole(${role.id})">删除</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
            
            container.innerHTML = html;
        }
        
        // 渲染用户列表
        function renderUserList() {
            const container = document.getElementById('userList');
            
            if (users.length === 0) {
                container.innerHTML = '<p>暂无用户数据</p>';
                return;
            }
            
            const html = `
                <table class="table">
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>邮箱</th>
                            <th>角色</th>
                            <th>部门</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${users.map(user => `
                            <tr>
                                <td>${user.username}</td>
                                <td>${user.fullName}</td>
                                <td>${user.email}</td>
                                <td>${user.role}</td>
                                <td>${getDepartmentName(user.departmentId)}</td>
                                <td>${user.enabled ? '启用' : '禁用'}</td>
                                <td>
                                    <button class="btn btn-secondary" onclick="editUser(${user.id})">编辑</button>
                                    <button class="btn btn-danger" onclick="deleteUser(${user.id})">删除</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
            
            container.innerHTML = html;
        }
        
        // 更新角色选择器
        function updateRoleSelects() {
            const roleSelects = ['assignRole', 'assignUserRole'];
            
            roleSelects.forEach(selectId => {
                const select = document.getElementById(selectId);
                if (select) {
                    select.innerHTML = '<option value="">请选择角色</option>' +
                        roles.map(role => `<option value="${role.id}">${role.name}</option>`).join('');
                }
            });
        }
        
        // 更新用户选择器
        function updateUserSelects() {
            const select = document.getElementById('assignUser');
            if (select) {
                select.innerHTML = '<option value="">请选择用户</option>' +
                    users.map(user => `<option value="${user.id}">${user.fullName} (${user.username})</option>`).join('');
            }
        }
        
        // 更新部门选择器
        function updateDepartmentSelects() {
            const select = document.getElementById('assignUserDepartment');
            if (select) {
                select.innerHTML = '<option value="">请选择部门</option>' +
                    departments.map(dept => `<option value="${dept.id}">${dept.name}</option>`).join('');
            }
        }
        
        // 获取部门名称
        function getDepartmentName(departmentId) {
            if (!departmentId) return '-';
            const dept = departments.find(d => d.id === departmentId);
            return dept ? dept.name : '-';
        }
        
        // 处理创建角色
        async function handleCreateRole(event) {
            event.preventDefault();
            
            const formData = {
                name: document.getElementById('roleName').value,
                description: document.getElementById('roleDescription').value
            };
            
            try {
                const response = await fetch('/api/admin/roles', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    },
                    body: JSON.stringify(formData)
                });
                
                if (response.ok) {
                    showAlert('角色创建成功', 'success');
                    document.getElementById('createRoleForm').reset();
                    await loadRoles();
                } else {
                    throw new Error('创建角色失败');
                }
            } catch (error) {
                console.error('创建角色失败:', error);
                showAlert('创建角色失败', 'error');
            }
        }
        
        // 处理创建权限
        async function handleCreatePermission(event) {
            event.preventDefault();
            
            const formData = {
                name: document.getElementById('permissionName').value,
                code: document.getElementById('permissionCode').value,
                resource: document.getElementById('permissionResource').value,
                action: document.getElementById('permissionAction').value,
                description: document.getElementById('permissionDescription').value
            };
            
            try {
                const response = await fetch('/api/permissions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    },
                    body: JSON.stringify(formData)
                });
                
                if (response.ok) {
                    showAlert('权限创建成功', 'success');
                    document.getElementById('createPermissionForm').reset();
                    await loadPermissions();
                } else {
                    throw new Error('创建权限失败');
                }
            } catch (error) {
                console.error('创建权限失败:', error);
                showAlert('创建权限失败', 'error');
            }
        }
        
        // 处理角色变更
        async function handleRoleChange(event) {
            const roleId = event.target.value;
            if (!roleId) {
                document.getElementById('rolePermissions').innerHTML = '';
                document.getElementById('saveRolePermissions').style.display = 'none';
                return;
            }
            
            try {
                const response = await fetch(`/api/permissions/role/${roleId}`, {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    const rolePermissions = data.data;
                    renderRolePermissions(roleId, rolePermissions);
                } else {
                    throw new Error('加载角色权限失败');
                }
            } catch (error) {
                console.error('加载角色权限失败:', error);
                showAlert('加载角色权限失败', 'error');
            }
        }
        
        // 渲染角色权限
        function renderRolePermissions(roleId, rolePermissions) {
            const container = document.getElementById('rolePermissions');
            const saveBtn = document.getElementById('saveRolePermissions');
            
            const html = `
                <h4>为角色分配权限</h4>
                <div class="checkbox-group">
                    ${permissions.map(permission => `
                        <div class="checkbox-item">
                            <input type="checkbox" id="perm_${permission.id}" 
                                   value="${permission.id}" 
                                   ${rolePermissions.some(rp => rp.id === permission.id) ? 'checked' : ''}>
                            <label for="perm_${permission.id}">${permission.name}</label>
                        </div>
                    `).join('')}
                </div>
            `;
            
            container.innerHTML = html;
            saveBtn.style.display = 'block';
            saveBtn.onclick = () => handleSaveRolePermissions(roleId);
        }
        
        // 处理保存角色权限
        async function handleSaveRolePermissions(roleId) {
            const checkboxes = document.querySelectorAll('#rolePermissions input[type="checkbox"]:checked');
            const permissionIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
            
            try {
                const response = await fetch('/api/permissions/role/assign', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    },
                    body: JSON.stringify({
                        roleId: roleId,
                        permissionIds: permissionIds
                    })
                });
                
                if (response.ok) {
                    showAlert('权限分配成功', 'success');
                } else {
                    throw new Error('权限分配失败');
                }
            } catch (error) {
                console.error('权限分配失败:', error);
                showAlert('权限分配失败', 'error');
            }
        }
        
        // 处理用户变更
        function handleUserChange(event) {
            const userId = event.target.value;
            if (!userId) return;
            
            // 这里可以加载用户的当前角色和部门信息
            const user = users.find(u => u.id == userId);
            if (user) {
                document.getElementById('assignUserRole').value = user.role;
                document.getElementById('assignUserDepartment').value = user.departmentId || '';
            }
        }
        
        // 处理保存用户角色
        async function handleSaveUserRole() {
            const userId = document.getElementById('assignUser').value;
            const roleId = document.getElementById('assignUserRole').value;
            const departmentId = document.getElementById('assignUserDepartment').value;
            
            if (!userId || !roleId) {
                showAlert('请选择用户和角色', 'error');
                return;
            }
            
            try {
                const response = await fetch('/api/user-roles/assign', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    },
                    body: JSON.stringify({
                        userId: parseInt(userId),
                        roleIds: [parseInt(roleId)],
                        departmentId: departmentId ? parseInt(departmentId) : null
                    })
                });
                
                if (response.ok) {
                    showAlert('角色分配成功', 'success');
                    await loadUsers();
                } else {
                    throw new Error('角色分配失败');
                }
            } catch (error) {
                console.error('角色分配失败:', error);
                showAlert('角色分配失败', 'error');
            }
        }
        
        // 显示提示信息
        function showAlert(message, type) {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type}`;
            alertDiv.textContent = message;
            
            const container = document.querySelector('.container');
            container.insertBefore(alertDiv, container.firstChild);
            
            setTimeout(() => {
                alertDiv.remove();
            }, 3000);
        }
        
        // 编辑权限
        function editPermission(id) {
            // 实现编辑权限的逻辑
            showAlert('编辑权限功能待实现', 'error');
        }
        
        // 删除权限
        async function deletePermission(id) {
            if (!confirm('确定要删除这个权限吗？')) return;
            
            try {
                const response = await fetch(`/api/permissions/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                });
                
                if (response.ok) {
                    showAlert('权限删除成功', 'success');
                    await loadPermissions();
                } else {
                    throw new Error('删除权限失败');
                }
            } catch (error) {
                console.error('删除权限失败:', error);
                showAlert('删除权限失败', 'error');
            }
        }
        
        // 编辑角色
        function editRole(id) {
            // 实现编辑角色的逻辑
            showAlert('编辑角色功能待实现', 'error');
        }
        
        // 删除角色
        async function deleteRole(id) {
            if (!confirm('确定要删除这个角色吗？')) return;
            
            try {
                const response = await fetch(`/api/admin/roles/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                });
                
                if (response.ok) {
                    showAlert('角色删除成功', 'success');
                    await loadRoles();
                } else {
                    throw new Error('删除角色失败');
                }
            } catch (error) {
                console.error('删除角色失败:', error);
                showAlert('删除角色失败', 'error');
            }
        }
        
        // 编辑用户
        function editUser(id) {
            // 实现编辑用户的逻辑
            showAlert('编辑用户功能待实现', 'error');
        }
        
        // 删除用户
        async function deleteUser(id) {
            if (!confirm('确定要删除这个用户吗？')) return;
            
            try {
                const response = await fetch(`/api/admin/users/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                });
                
                if (response.ok) {
                    showAlert('用户删除成功', 'success');
                    await loadUsers();
                } else {
                    throw new Error('删除用户失败');
                }
            } catch (error) {
                console.error('删除用户失败:', error);
                showAlert('删除用户失败', 'error');
            }
        }
    </script>
</body>
</html> 